import React, { memo, Component } from 'react'
import { Input, Radio, Upload, Modal, message } from 'antd'
import {
  PlusOutlined,
} from '@ant-design/icons';
import './index.css'
import { confessionWall } from '@/api';
import { StudentInfo } from '../../../utils/model';
const {TextArea} = Input
const getBase64 = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
const uploadButton = (
  <div>
    <PlusOutlined style={{color:'white'}}/>
    <div
      style={{
        marginTop: 8,
        color:'white'
      }}
    >
      上传
    </div>
  </div>
);
class ConfessionCards extends Component {
  static contextType = StudentInfo
  constructor(props) {
    super(props)
    this.state = {
      studentId:null,
      anonymous: false, //是否匿名
      title:'', //标题
      content:'', //表白内容
      fileList:[], //上传图片列表
      previewImageUrl:'', //预览图片url
      previewVisible:false, //预览弹窗可见
      previewTitle: '', //预览弹窗标题
      onHover:false, //鼠标是否移入发送图片
    }
  }
  componentDidMount(){
    this.setState({
      studentId: this.context?.studentInfo?.studentId
    })
  }

  selectAnonymous = (e) => {
    this.setState({
      anonymous: e.target.value
    })
  }

  handleChangephoto = ({ fileList: newFileList }) => {
    console.log(newFileList);
    this.setState({
      fileList: newFileList
    })
  }

  handlePreview = async (file) =>{
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
  
      this.setState({
        previewImageUrl:file.url || file.preview,
        previewVisible:true, 
        previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
      })
  }

  publish =() =>{
    const {fileList,anonymous,title,content} = this.state
    if(title === ''){
      message.error('标题好像还没有填哦~')
      return
    }
    if(content === ''){
      message.error('表白内容好像还没有填哦~')
      return
    }
    confessionWall({anonymous: anonymous?1:0,title,content,files: fileList.map(i=>i.response).join('&')}).then(res=>{
      if(res.data.success){
        message.success(res.data.message)
        this.props.history.push('/home/schoolIndex/confession/confessionCards')
      }
    })
  }
  render() {
    const { anonymous, studentId, fileList, previewVisible, previewTitle, previewImageUrl,onHover } = this.state
    return (
      <div className="scrollArea">
      <div className="centerBox" style={{color:'white'}}>
        <Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={()=>{this.setState({previewVisible: false})}}>
                    <img
                      alt="example"
                      style={{
                        width: '100%',
                      }}
                      src={previewImageUrl}
                    />
                  </Modal>
       <div className="biaobai-card">
          <div className="titleBox">
            <Input placeholder='在这里说出你的热爱' onChange={(e)=>{
              this.setState({
                title:e.target.value
              })
            }}></Input>
          </div>
          <div className="contentBox">
            <TextArea placeholder='想说的都写在这里吧' onChange={(e)=>{
              this.setState({
                content:e.target.value
              })
            }}></TextArea>
          </div>
          <div className="radioBox">
          <Radio.Group onChange={this.selectAnonymous.bind(this)} value={anonymous}>
            <Radio value={true}>匿名</Radio>
            <Radio value={false}>不匿名</Radio>
          </Radio.Group>
          </div>
          <div className="uploadBox">
          <Upload
                    action="https://www.donglongdong.xyz/fileUpload"
                    data={{useMethod:'表白墙上传表白图片',studentId:studentId}}
                    listType="picture-card"
                    fileList={fileList}
                    onPreview={this.handlePreview.bind(this)}
                    onChange={this.handleChangephoto.bind(this)}
                  >
                    {fileList.length >= 3 ? null : uploadButton}
                  </Upload>
          </div>
          <div className="sendPicBox" onMouseEnter={()=>{this.setState({onHover:true})}} onMouseLeave={()=>{this.setState({onHover:false})}} onClick={()=>{this.publish()}}>
              {
                onHover && <div className="hoverSendPicture"></div>
              }
              {
                !onHover && <div className="sendPicture"></div>
              }
          </div>
       </div>
      </div>
      </div>
    )
  }
}

export default memo(ConfessionCards)